src/core/routing/types.ts (1)

1-7: Optional: use a const object + union type instead of a TS enum

This avoids enum runtime artifacts, plays nicer with ESM tree-shaking, and retains the same call-site API.

-export enum SearchParams {
-  FocusComponentId = 'focusComponentId',
-  FocusErrorBinding = 'focusErrorBinding',
-  ExitSubform = 'exitSubform',
-  Validate = 'validate',
-  Pdf = 'pdf',
-}
+export const SearchParams = {
+  FocusComponentId: 'focusComponentId',
+  FocusErrorBinding: 'focusErrorBinding',
+  ExitSubform: 'exitSubform',
+  Validate: 'validate',
+  Pdf: 'pdf',
+} as const;
+export type SearchParamKey = keyof typeof SearchParams;

src/components/form/LinkToPotentialNode.tsx (1)

21-23: Tighten search extraction for robustness.
Safer handling when no query string and clearer intent.

-  const searchParams = typeof to === 'string' ? to.split('?').at(1) : to.search;
+  const searchParams =
+    typeof to === 'string'
+      ? (to.includes('?') ? to.slice(to.indexOf('?') + 1) : '')
+      : (to.search ?? '');

test/e2e/integration/stateless-app/receipt.ts (2)

19-23: Make the manual back-navigation URL replace resilient.
Preserve query/hash and avoid brittle end-of-string assumptions.

-    cy.url().then((url) => cy.visit(url.replace(/\/Task_2\/1$/, '/Task_1')));
+    cy.location('href').then((href) =>
+      cy.visit(href.replace(/\/Task_2\/1(?=(?:\?|#|$))/, '/Task_1')),
+    );

---

55-63: Ditto for navigation away from receipt.
Use the same resilient pattern.

-    cy.url().then((url) => cy.visit(url.replace(/\/ProcessEnd$/, '/Task_4')));
+    cy.location('href').then((href) =>
+      cy.visit(href.replace(/\/ProcessEnd(?=(?:\?|#|$))/, '/Task_4')),
+    );

src/features/instance/useProcessNext.tsx (1)

44-47: Remove duplicate hook call; reuse one reference.
useOnFormSubmitValidation() is called twice under two names.

-  const onFormSubmitValidation = useOnFormSubmitValidation();
+  const runFormSubmitValidation = useOnFormSubmitValidation();
@@
-  const onSubmitFormValidation = useOnFormSubmitValidation();
@@
-      const hasErrors = await onFormSubmitValidation();
+      const hasErrors = await runFormSubmitValidation();
@@
-        const hasValidationErrors = await onSubmitFormValidation(true);
+        const hasValidationErrors = await runFormSubmitValidation(true);

src/features/datamodel/utils.ts (2)

104-108: Strengthen typing: explicit return type and tuple alias for readability

Give the function an explicit boolean return type and use a named, labeled tuple type instead of raw indices to avoid “magic numbers”.

-export function isDataTypeWritable(
-  dataType: string | undefined,
-  isStateless: boolean,
-  dataElements: (readonly [string, boolean])[],
-) {
+export function isDataTypeWritable(
+  dataType: string | undefined,
+  isStateless: boolean,
+  dataElements: readonly DataElementTuple[],
+): boolean {

Add this type once in the module (outside the selected range):

export type DataElementTuple = readonly [dataType: string, locked: boolean];

---

115-116: Minor clarity: handle undefined result explicitly

Avoid relying on coercion; return false when the element isn’t found, and keep the boolean semantics obvious.

-  return !!dataElement && !dataElement[1];
+  return dataElement ? !dataElement[1] : false;

src/features/datamodel/DataModelsProvider.tsx (3)

159-163: Prefer isSuccess over isFetching; tighten select typing to drop as const

Using isSuccess better models “data is ready” than isFetching (which also toggles during background refetches). Also, provide a concrete return type for select to avoid the as const assertion.

-  const { data: dataElements, isFetching } = useInstanceDataQuery({
+  const { data: dataElements, isSuccess } = useInstanceDataQuery<readonly DataElementTuple[]>({
     enabled: !isStateless,
-    select: (data) => data.data.map((element) => [element.dataType, element.locked] as const),
+    select: (data) => data.data.map(({ dataType, locked }) => [dataType, locked]) as const,
   });

(Assumes DataElementTuple from utils is exported; otherwise define a local alias.)

---

195-205: Avoid repeated linear scans by precomputing a Set

Micro-optimization and clearer intent when checking for presence across many data types.

-      if (!isStateless && !dataElements?.find(([dt]) => dt === dataType)) {
+      const types = new Set((dataElements ?? []).map(([dt]) => dt));
+      if (!isStateless && !types.has(dataType)) {
         const error = new MissingDataElementException(dataType);
         window.logErrorOnce(error.message);
         continue;
       }
@@
-      if (isDataTypeWritable(dataType, isStateless, dataElements ?? [])) {
+      if (isDataTypeWritable(dataType, isStateless, dataElements ?? [])) {
         writableDataTypes.push(dataType);
       }

Note: declare types once before the loop if you keep using it multiple times.

---

209-209: Keep dependencies in sync with control flow

If you adopt isSuccess, remove isFetching from the deps and add isSuccess. Also, dataElements can be omitted if you derive the Set inside the effect when isSuccess is true.

-  }, [applicationMetadata, defaultDataType, isStateless, layouts, setDataTypes, dataElements, layoutSetId, isFetching]);
+  }, [applicationMetadata, defaultDataType, isStateless, layouts, setDataTypes, layoutSetId, isSuccess]);

src/features/navigation/utils.ts (1)

22-27: Ensure boolean return value

pageGroups || taskGroups.length can yield a non-boolean (object or number). Cast to boolean to keep types predictable.

-  return !isReceiptPage && (pageGroups || taskGroups.length);
+  return !isReceiptPage && !!(pageGroups || taskGroups.length > 0);

src/components/form/Form.tsx (1)

239-258: Remove unused dependency and variable

onFormSubmitValidation is declared but not used; also listed in deps causing needless effect runs.

-  const onFormSubmitValidation = useOnFormSubmitValidation();
   const exitSubform = useQueryKey(SearchParams.ExitSubform)?.toLocaleLowerCase() === 'true';
   const validate = useQueryKey(SearchParams.Validate)?.toLocaleLowerCase() === 'true';
   const navigate = useNavigate();
   const searchStringRef = useAsRef(useLocation().search);
@@
-  }, [navigate, searchStringRef, exitSubform, validate, onFormSubmitValidation]);
+  }, [navigate, searchStringRef, exitSubform, validate]);

src/core/routing/useIsReceiptPage.ts (1)

4-7: Receipt detection hook looks good; minor readability tweak optional

If the list grows, a Set reads cleaner.

-  return taskId === TaskKeys.CustomReceipt || taskId === TaskKeys.ProcessEnd;
+  return new Set([TaskKeys.CustomReceipt, TaskKeys.ProcessEnd]).has(taskId);

src/hooks/useNavigatePage.ts (1)

235-240: Avoid emitting trailing “?” when no search params

When stateless, the URL can end with a bare “?” if there are no params.

Apply this diff:

-    if (isStatelessApp && orderRef.current[0] !== undefined && (!currentPageId || !isValidPageId(currentPageId))) {
-      navigate(`/${orderRef.current[0]}?${searchParamsRef.current}`, { replace: true });
-    }
+    if (isStatelessApp && orderRef.current[0] !== undefined && (!currentPageId || !isValidPageId(currentPageId))) {
+      const q = searchParamsRef.current.toString();
+      const qs = q ? `?${q}` : '';
+      navigate(`/${orderRef.current[0]}${qs}`, { replace: true });
+    }

src/features/receipt/FixWrongReceiptType.tsx (1)

21-26: Prefer const expression for redirect target

Minor readability: compute redirectTo as a single const expression.

Apply this diff:

-  let redirectTo: undefined | TaskKeys = undefined;
-  if (taskId === TaskKeys.ProcessEnd && hasCustomReceipt) {
-    redirectTo = TaskKeys.CustomReceipt;
-  } else if (taskId === TaskKeys.CustomReceipt && !hasCustomReceipt) {
-    redirectTo = TaskKeys.ProcessEnd;
-  }
+  const redirectTo: TaskKeys | undefined =
+    taskId === TaskKeys.ProcessEnd && hasCustomReceipt
+      ? TaskKeys.CustomReceipt
+      : taskId === TaskKeys.CustomReceipt && !hasCustomReceipt
+        ? TaskKeys.ProcessEnd
+        : undefined;

src/layout/GenericComponent.tsx (1)

230-233: Non-standard scroll behavior value

scrollIntoView({ behavior: 'instant' }) is non-standard. Use 'auto' (or 'smooth') to avoid cross-browser issues.

-          !abortController.current.signal.aborted && div.scrollIntoView({ behavior: 'instant' });
+          !abortController.current.signal.aborted && div.scrollIntoView({ behavior: 'auto' });

src/components/presentation/Presentation.test.tsx (1)

91-97: Rename tests to match new hook-driven behavior (cosmetic)

Titles still reference ProcessTaskType; assertions are now driven by useIsReceiptPage. Rename for clarity.

Example:

• “background is greyLight when not receipt page”
• “background is greenLight when receipt page”

Also applies to: 99-107

src/features/processEnd/feedback/Feedback.tsx (1)

55-58: Comment/backoff mismatch

The current formula reaches the 30s max delay around attempt ≈ 39 (starting from 0), not 20. Either adjust the formula or update the comment to reflect reality.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

Learnt from: CR
PR: Altinn/app-frontend-react#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-22T13:53:28.252Z
Learning: Applies to **/*.{ts,tsx} : For TanStack Query, use objects to manage query keys and functions, and centralize shared options via `queryOptions`

Learnt from: CR
PR: Altinn/app-frontend-react#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-22T13:53:28.252Z
Learning: Applies to **/*.test.{ts,tsx} : In tests, use `renderWithProviders` from `src/test/renderWithProviders.tsx` to supply required form layout context

src/components/presentation/Presentation.test.tsx (1)

32-35: Restore property spies to avoid cross-test bleed — addressed

Adding jest.restoreAllMocks() fixes the teardown gap flagged earlier. Nice.

src/features/processEnd/feedback/Feedback.tsx (2)

24-31: LGTM: ended-first check and data-task navigation

Prioritizing ended before task change prevents transient misnavigation and enables routing to non-EndEvent tasks (e.g., data tasks). This addresses the core bug.

---

13-14: Fix stale previousData capture and avoid unnecessary backoff resets

The callback closes over previousData, and including it in the dependency array restarts polling frequently. Track the last task id in a ref and compare against that inside a stable callback.

-  const { refetch: reFetchProcessData, data: previousData } = useProcessQuery();
+  const { refetch: reFetchProcessData, data: previousData } = useProcessQuery();
+  const previousTaskRef = useRef<string | undefined>(previousData?.currentTask?.elementId);
+  useEffect(() => {
+    previousTaskRef.current = previousData?.currentTask?.elementId;
+  }, [previousData?.currentTask?.elementId]);
@@
-  const callback = useCallback(async () => {
+  const callback = useCallback(async () => {
     const result = await reFetchProcessData();
     let navigateTo: undefined | string;
     if (result.data?.ended) {
       navigateTo = TaskKeys.ProcessEnd;
     } else if (
       result.data?.currentTask?.elementId &&
-      result.data.currentTask.elementId !== previousData?.currentTask?.elementId
+      result.data.currentTask.elementId !== previousTaskRef.current
     ) {
       navigateTo = result.data.currentTask.elementId;
     }
 
     if (navigateTo && result.data) {
       optimisticallyUpdateProcess(result.data);
       await reFetchInstanceData();
       navigateToTask(navigateTo);
     }
-  }, [
-    navigateToTask,
-    optimisticallyUpdateProcess,
-    previousData?.currentTask?.elementId,
-    reFetchInstanceData,
-    reFetchProcessData,
-  ]);
+  }, [navigateToTask, optimisticallyUpdateProcess, reFetchInstanceData, reFetchProcessData]);
@@
-  useBackoff(callback);
+  useBackoff(callback);

Also applies to: 21-44, 47-47

src/components/wrappers/ProcessWrapper.tsx (2)

71-94: Make process/next gating reactive with useIsMutating

Using queryClient.isMutating snapshots once and may miss updates; prefer useIsMutating.

Apply this diff:

@@
-  const processNextKey = getProcessNextMutationKey();
-  const queryClient = useQueryClient();
-  const isRunningProcessNext = queryClient.isMutating({ mutationKey: processNextKey });
+  const processNextKey = getProcessNextMutationKey();
+  const isRunningProcessNext = useIsMutating({ mutationKey: processNextKey }) > 0;

And below:

@@
-import { useQueryClient } from '@tanstack/react-query';
-import type { QueryClient } from '@tanstack/react-query';
+import { useIsMutating, useQueryClient } from '@tanstack/react-query';
+import type { QueryClient } from '@tanstack/react-query';

---

181-193: Simplify and modernize useIsRunningProcessNext

Replace stateful snapshot with useIsMutating to avoid stale state.

Apply this diff:

-function useIsRunningProcessNext() {
-  const queryClient = useQueryClient();
-  const [isMutating, setIsMutating] = useState<boolean | null>(null);
-
-  // Intentionally wrapped in a useEffect() and saved as a state. If this happens, we'll seemingly be locked out
-  // with a <Loader /> forever, but when this happens, we also know we'll be re-rendered soon. This is only meant to
-  // block rendering when we're calling process/next.
-  useEffect(() => {
-    setIsMutating(isRunningProcessNext(queryClient));
-  }, [queryClient]);
-
-  return isMutating;
-}
+function useIsRunningProcessNext() {
+  const count = useIsMutating({ mutationKey: getProcessNextMutationKey() });
+  return count > 0;
+}

src/components/presentation/Presentation.test.tsx (3)

37-50: Assert the query function is actually used

Optional: wrap fetchReturnUrl in a mock and assert it was called; improves test intent and guards refactors.

Apply this diff within this test:

   it('should link to query parameter returnUrl if valid URL', async () => {
     const returnUrl = 'foo';

     const mockedLocation = { ...realLocation, search: `?returnUrl=${returnUrl}` };
     jest.spyOn(window, 'location', 'get').mockReturnValue(mockedLocation);

-    await render({}, { fetchReturnUrl: async () => returnUrl });
+    const fetchReturnUrlMock = jest.fn().mockResolvedValue(returnUrl);
+    await render({}, { fetchReturnUrl: fetchReturnUrlMock });

     const closeButton = screen.getByRole('link', {
       name: 'Tilbake',
     });

     expect(closeButton).toHaveAttribute('href', returnUrl);
+    expect(fetchReturnUrlMock).toHaveBeenCalled();
   });

---

92-98: Rename test to reflect hook semantics, not ProcessTaskType.Data

The component no longer uses a type prop; the name should express isReceiptPage=false.

Apply this diff:

-  it('the background color should be greyLight if type is "ProcessTaskType.Data"', async () => {
+  it('the background color should be greyLight when isReceiptPage=false', async () => {

---

100-108: Tighten semantics and scope the mock to this test

• Rename to reflect isReceiptPage=true.
• Prefer mockReturnValueOnce(true) for tighter scope.

Apply this diff:

-  it('the background color should be lightGreen if type is "ProcessTaskType.Archived"', async () => {
-    mockUseIsReceiptPage.mockReturnValue(true);
+  it('the background color should be lightGreen when isReceiptPage=true', async () => {
+    mockUseIsReceiptPage.mockReturnValueOnce(true);

src/features/instance/useProcessNext.tsx (1)

92-93: Parallel refetch is right; consider allSettled to avoid aborting on a single failure

If either refetch rejects, Promise.all will reject and skip invalidation/navigation work. Using allSettled is a low-risk hardening.

-        await Promise.all([refetchProcessData(), reFetchInstanceData()]);
+        await Promise.allSettled([refetchProcessData(), reFetchInstanceData()]);

src/features/processEnd/feedback/Feedback.tsx (1)

59-85: Backoff comments don’t match the math; also clear timers on unmount

• The code reaches 30s delay near attempt ~40, not 20. Fix the comment for accuracy.
• Clear the timeout on cleanup to avoid stray queued callbacks; you already guard with shouldContinue, but clearing is cleaner.

 function useBackoff(callback: () => Promise<void>) {
   // The backoff algorithm is used to check the process data, and slow down the requests after a while.
   // At first, it starts off once a second (every 1000ms) for 10 seconds.
-  // After that, it slows down by one more second for every request.
-  // Once it reaches 20 attempts, it will reach the max delay of 30 seconds between each request.
+  // After that, it slows down by one more second for every request.
+  // It reaches the max delay of 30 seconds between each request after ~40 attempts with the current formula.
   const attempts = useRef(0);
+  const timeoutRef = useRef<number | undefined>(undefined);
 
   useEffect(() => {
     let shouldContinue = true;
     function continueCalling() {
       const backoff = attempts.current < 10 ? 1000 : Math.min(30000, 1000 + (attempts.current - 10) * 1000);
-      setTimeout(() => {
+      timeoutRef.current = window.setTimeout(() => {
         if (!shouldContinue) {
           return;
         }
         callback().then();
         attempts.current++;
         shouldContinue && continueCalling();
       }, backoff);
     }
 
     continueCalling();
 
     return () => {
       shouldContinue = false;
+      if (timeoutRef.current !== undefined) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, [callback]);
 }

src/features/receipt/FixWrongReceiptType.tsx (1)

29-33: Harden logging

window.logWarnOnce may be undefined in some environments; guard it and fall back to console.warn.

See the logging changes included in the diff above.

src/features/receipt/ReceiptContainer.tsx (1)

101-110: Avoid duplicate useLanguage calls and use the existing langTools

Minor cleanup: you call useLanguage() twice; reuse langTools for langAsString.

Apply this diff:

@@
-  const langTools = useLanguage();
+  const langTools = useLanguage();
@@
-  const { langAsString } = useLanguage();
@@
-      <title>{`${getPageTitle(appName, langAsString('receipt.title'), appOwner)}`}</title>
+      <title>{`${getPageTitle(appName, langTools.langAsString('receipt.title'), appOwner)}`}</title>

Also applies to: 176-179

src/components/wrappers/ProcessWrapper.tsx (2)

195-228: Return a strict boolean from useIsWrongTask

Ensure the hook returns true|false, not null or a truthy value; avoids ambiguous checks.

Apply this diff:

-  return isWrongTask && !isCurrentTask && !isNavigating;
+  return isWrongTask === true && !isCurrentTask && !isNavigating;

---

120-126: Optional: Prefer auto-navigation to current task over showing an error on Feedback/Confirm

To better satisfy “Feedback step should navigate to a data task,” render Feedback/Confirm even if isWrongTask just flipped and let them drive navigation; move the isWrongTask guard below these branches or auto-navigate when wrong.

Proposed reordering:

-  if (isWrongTask) {
-    return (
-      <PresentationComponent showNavigation={false}>
-        <NavigationError label='general.part_of_form_completed' />
-      </PresentationComponent>
-    );
-  }
@@
   if (taskType === ProcessTaskType.Feedback) {
     return (
       <PresentationComponent>
         <Feedback />
       </PresentationComponent>
     );
   }
+
+  if (isWrongTask) {
+    return (
+      <PresentationComponent showNavigation={false}>
+        <NavigationError label='general.part_of_form_completed' />
+      </PresentationComponent>
+    );
+  }

Also applies to: 136-142

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

Learnt from: olemartinorg
PR: Altinn/app-frontend-react#3645
File: src/features/datamodel/DataModelsProvider.tsx:172-175
Timestamp: 2025-08-28T12:00:31.684Z
Learning: In DataModelsProvider.tsx, the effect that processes referenced data types must run for both stateless and non-stateless apps. The `isFetching` guard is appropriate because stateless apps don't fetch instance data (useInstanceDataQuery is disabled with `enabled: !isStateless`) but still need the data type processing to occur.

Learnt from: CR
PR: Altinn/app-frontend-react#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-22T13:53:28.252Z
Learning: Applies to **/*.test.{ts,tsx} : In tests, use `renderWithProviders` from `src/test/renderWithProviders.tsx` to supply required form layout context

src/features/processEnd/feedback/Feedback.tsx (1)

13-20: Avoid stale previousData by comparing via a ref; drop deep dep to reduce effect churn

Current code closes over previousData and re-memos on a deep property, which can still race under async polling. Track the latest value in a ref and read from it inside the callback. This also simplifies dependencies.

@@
-  const { refetch: reFetchProcessData, data: previousData } = useProcessQuery();
+  const { refetch: reFetchProcessData, data: previousData } = useProcessQuery();
+  const previousDataRef = useRef(previousData);
+  useEffect(() => {
+    previousDataRef.current = previousData;
+  }, [previousData]);
@@
-      result.data.currentTask.elementId !== previousData?.currentTask?.elementId
+      result.data.currentTask.elementId !== previousDataRef.current?.currentTask?.elementId
@@
-    optimisticallyUpdateProcess,
-    previousData?.currentTask?.elementId,
+    optimisticallyUpdateProcess,
+    // previousData is read from previousDataRef to avoid stale captures

Also applies to: 31-35, 42-48

src/core/routing/useIsNavigating.ts (1)

1-10: Return actual router navigation state; drop brittle hash check

Current logic inverts idle and couples to window.location.hash. Use react-router’s state directly.

Apply this diff:

-import { useLocation, useNavigation } from 'react-router-dom';
+import { useNavigation } from 'react-router-dom';

 export function useIsNavigating() {
-  const isIdle = useNavigation().state === 'idle';
-  const location = useLocation();
-  const expectedLocation = `${location.pathname}${location.search}`.replace(/^\//, '');
-  const locationIsUpToDate = window.location.hash.endsWith(expectedLocation);
-
-  return !locationIsUpToDate || !isIdle;
+  const { state } = useNavigation();
+  return state !== 'idle'; // true while submitting/loading
 }

src/components/wrappers/ProcessWrapper.tsx (1)

109-112: Archived→receipt loader is OK (navigation handled elsewhere)

Acknowledging the intentional design per project guidance; no change needed.

src/features/datamodel/DataModelsProvider.tsx (2)

173-175: Keep the isFetching guard; add an explanatory comment to prevent regressions

Given instanceless apps disable the query, the guard must remain on isFetching (not success). Add a clarifying comment.

   // Find all data types referenced in dataModelBindings in the layout
   useEffect(() => {
-    if (isFetching) {
+    // Important: For instanceless apps, useInstanceDataQuery is disabled.
+    // We still need to parse referenced data types in that case.
+    // Only bail while actively fetching for instance-based apps.
+    if (isFetching) {
       return;
     }

---

152-160: Avoid double useApplicationMetadata() call; derive isStateless from the existing variable

Use the already-read applicationMetadata to prevent redundant context reads and ensure consistency if metadata updates.

   const applicationMetadata = useApplicationMetadata();
@@
-  const isStateless = useApplicationMetadata().isStatelessApp;
+  const isStateless = applicationMetadata.isStatelessApp;

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

Learnt from: olemartinorg
PR: Altinn/app-frontend-react#3645
File: src/components/wrappers/ProcessWrapper.tsx:107-110
Timestamp: 2025-08-28T12:25:27.289Z
Learning: In ProcessWrapper.tsx, when taskType === ProcessTaskType.Archived and taskId !== TaskKeys.CustomReceipt, the component shows a loader with reason 'redirect-to-receipt' but does not perform explicit navigation. This is intentional - other parts of the system handle the actual navigation closer to where user interactions occur.

Learnt from: olemartinorg
PR: Altinn/app-frontend-react#3645
File: src/components/wrappers/ProcessWrapper.tsx:107-110
Timestamp: 2025-08-28T12:25:27.289Z
Learning: In the app-frontend-react codebase, the architecture favors navigation happening closer to user interactions or specific process state changes, rather than using universal effects that automatically redirect users. This is part of a design philosophy to avoid "free-standing effects that throw you around" and make navigation more predictable and contextual.

Learnt from: olemartinorg
PR: Altinn/app-frontend-react#3645
File: src/features/datamodel/DataModelsProvider.tsx:172-175
Timestamp: 2025-08-28T12:00:32.967Z
Learning: In DataModelsProvider.tsx, the effect that processes referenced data types must run for both stateless and non-stateless apps. The `isFetching` guard is appropriate because stateless apps don't fetch instance data (useInstanceDataQuery is disabled with `enabled: !isStateless`) but still need the data type processing to occur.

Learnt from: olemartinorg
PR: Altinn/app-frontend-react#3645
File: src/features/datamodel/DataModelsProvider.tsx:172-175
Timestamp: 2025-08-28T12:00:32.967Z
Learning: In the Altinn app-frontend-react codebase, "stateless" refers to "instanceless" applications. While stateless/instanceless apps don't have server-side instance data, they still require data models to be loaded and processed for local state management.

Learnt from: CR
PR: Altinn/app-frontend-react#0
File: CLAUDE.md:0-0
Timestamp: 2025-08-22T13:53:28.252Z
Learning: Applies to **/*.test.{ts,tsx} : In tests, use `renderWithProviders` from `src/test/renderWithProviders.tsx` to supply required form layout context

src/components/wrappers/ProcessWrapper.tsx (2)

109-111: Archived task shows loader without explicit redirect — intentional

Acknowledging prior decision: redirect handled elsewhere; keeping this as a passive loader is by design.

---

197-231: Annotate hook return type (nit) and keep semantics explicit

The hook returns boolean | null; make it explicit.

-function useIsWrongTask(taskId: string | undefined) {
+function useIsWrongTask(taskId: string | undefined): boolean | null {

Note: prior discussions covered timeout cleanup/abort; not rehashing here.

src/features/processEnd/feedback/Feedback.tsx (2)

27-35: Ended-first navigation ordering is correct.

Thanks for prioritizing ended before task-change; this prevents transient misnavigation.

---

27-35: Decouple polling restarts from query cache churn; read previous process via ref.

Using previousData?.currentTask?.elementId in deps causes the backoff loop to restart on every cache change. Keep a ref of the latest process to compare inside the callback and remove it from deps.

-  const { refetch: reFetchProcessData, data: previousData } = useProcessQuery();
+  const { refetch: reFetchProcessData, data: previousData } = useProcessQuery();
+  const previousDataRef = useRef(previousData);
+  useEffect(() => {
+    previousDataRef.current = previousData;
+  }, [previousData]);
@@
-    } else if (
-      result.data.currentTask?.elementId &&
-      result.data.currentTask.elementId !== previousData?.currentTask?.elementId
-    ) {
+    } else if (
+      result.data.currentTask?.elementId &&
+      result.data.currentTask.elementId !== previousDataRef.current?.currentTask?.elementId
+    ) {
       navigateTo = result.data.currentTask.elementId;
     }
@@
   }, [
     navigateToTask,
     optimisticallyUpdateProcess,
-    previousData?.currentTask?.elementId,
     reFetchInstanceData,
     reFetchProcessData,
   ]);

Also applies to: 42-48

src/components/wrappers/ProcessWrapper.tsx (2)

78-81: Guard navigate while router is busy; normalize isMutating to boolean

Good guard with isNavigating. Minor nit: coerce isMutating count to boolean for consistency with helpers.

-  const isRunningProcessNext = queryClient.isMutating({ mutationKey: processNextKey });
+  const isRunningProcessNext = queryClient.isMutating({ mutationKey: processNextKey }) > 0;

Also applies to: 86-89

---

179-195: Add explicit return types for helpers (nit)

Tiny clarity win; no behavior change.

-function isRunningProcessNext(queryClient: QueryClient) {
+function isRunningProcessNext(queryClient: QueryClient): boolean {
   return queryClient.isMutating({ mutationKey: getProcessNextMutationKey() }) > 0;
 }
 
-function useIsRunningProcessNext() {
+function useIsRunningProcessNext(): boolean | null {
   const queryClient = useQueryClient();
   const [isMutating, setIsMutating] = useState<boolean | null>(null);

src/features/processEnd/feedback/Feedback.tsx (1)

13-20: Good: disabled instance query for explicit refetch; also disable focus-refetch.

Nice switch to enabled: false. Consider also disabling focus refetch to avoid accidental fetches.

-  const reFetchInstanceData = useInstanceDataQuery({ enabled: false }).refetch;
+  const reFetchInstanceData = useInstanceDataQuery({ enabled: false, refetchOnWindowFocus: false }).refetch;

src/features/propagateTraceWhenPdf/index.ts (4)

6-13: Type the cookie map and harden parsing (avoid empty keys, prototype keys).

Prevents TS index errors and edge cases when document.cookie is empty.

Apply:

-function getCookies(): { [key: string]: string } {
-  const cookie = {};
-  document.cookie.split(';').forEach((el) => {
-    const split = el.split('=');
-    cookie[split[0].trim()] = split.slice(1).join('=');
-  });
-  return cookie;
-}
+function getCookies(): Record<string, string> {
+  const cookies: Record<string, string> = Object.create(null);
+  const raw = typeof document !== 'undefined' ? document.cookie : '';
+  if (!raw) return cookies;
+  raw.split(';').forEach((el) => {
+    if (!el) return;
+    const [rawKey, ...rest] = el.split('=');
+    const key = rawKey?.trim();
+    if (!key) return;
+    cookies[key] = rest.join('=');
+  });
+  return cookies;
+}

---

15-20: Guard against SSR/non‑browser invocation.

Avoids ReferenceErrors if called outside the browser (tests/SSR).

 export function propagateTraceWhenPdf() {
   try {
-    const hash = window.location.hash;
+    if (typeof window === 'undefined' || typeof document === 'undefined') return;
+    const hash = window.location.hash;
     const search = hash.split('?')[1] ?? '';
     const isPdf = new URLSearchParams(search).get(SearchParams.Pdf) === '1';

---

4-6: Prevent duplicate axios interceptors on repeated calls.

Without gating/ejecting, repeated invocations can stack interceptors.

 import { appPath } from 'src/utils/urls/appUrlHelper';
 
+let pdfInterceptorId: number | null = null;
+
 function getCookies(): { [key: string]: string } {

-    if (isPdf) {
+    if (isPdf && pdfInterceptorId === null) {
       const cookies = getCookies();
-      axios.interceptors.request.use((config) => {
+      pdfInterceptorId = axios.interceptors.request.use((config) => {
         try {
           if (config.url?.startsWith(appPath) !== true) {
             return config;
           }

Optionally return a disposer from this function (or handle elsewhere) to eject when no longer needed:

// elsewhere when appropriate:
// if (pdfInterceptorId !== null) { axios.interceptors.request.eject(pdfInterceptorId); pdfInterceptorId = null; }

Also applies to: 21-46

---

29-39: Header assignment: be compatible with Axios v1 types.

Use AxiosHeaders.set when available; otherwise fall back to plain object merge.

-          // This header is caught in app-lib/backend and used to allow injection of traceparent/context
-          config.headers['X-Altinn-IsPdf'] = 'true';
-
-          const traceparent = cookies['altinn-telemetry-traceparent'];
-          const tracestate = cookies['altinn-telemetry-tracestate'];
-          if (traceparent) {
-            config.headers['traceparent'] = traceparent;
-          }
-          if (tracestate) {
-            config.headers['tracestate'] = tracestate;
-          }
+          // This header is caught in app-lib/backend and used to allow injection of traceparent/context
+          const traceparent = cookies['altinn-telemetry-traceparent'];
+          const tracestate = cookies['altinn-telemetry-tracestate'];
+          const h = config.headers as unknown;
+          if (h && typeof (h as { set?: Function }).set === 'function') {
+            (h as { set: (k: string, v: string) => void }).set('X-Altinn-IsPdf', 'true');
+            if (traceparent) (h as { set: (k: string, v: string) => void }).set('traceparent', traceparent);
+            if (tracestate) (h as { set: (k: string, v: string) => void }).set('tracestate', tracestate);
+          } else {
+            config.headers = {
+              ...(config.headers ?? {}),
+              'X-Altinn-IsPdf': 'true',
+              ...(traceparent ? { traceparent } : {}),
+              ...(tracestate ? { tracestate } : {}),
+            };
+          }

src/features/receipt/ReceiptContainer.tsx (1)

78-82: Redundant prop: PresentationComponent already hides navigation on receipt pages.

PresentationComponent derives isReceipt internally and sets showNavigation to false for receipts. The explicit showNavigation={false} here is unnecessary.

Apply this diff if you keep this block:

-      <PresentationComponent showNavigation={false}>
+      <PresentationComponent>

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: olemartinorg
PR: Altinn/app-frontend-react#3645
File: src/features/receipt/FixWrongReceiptType.tsx:16-34
Timestamp: 2025-09-03T14:23:33.606Z
Learning: In FixWrongReceiptType.tsx, brief ping-ponging between receipt routes during instance data loading is acceptable because the instance data is typically already fetched when this component runs. The author considers this a non-issue.

Learnt from: olemartinorg
PR: Altinn/app-frontend-react#3645
File: src/features/receipt/FixWrongReceiptType.tsx:16-34
Timestamp: 2025-09-03T14:23:33.606Z
Learning: In FixWrongReceiptType.tsx, brief ping-ponging between receipt routes during instance data loading is acceptable because the instance data is typically already fetched when this component runs. The author considers this a non-issue.

Learnt from: olemartinorg
PR: Altinn/app-frontend-react#3645
File: src/components/wrappers/ProcessWrapper.tsx:107-110
Timestamp: 2025-08-28T12:25:27.289Z
Learning: In ProcessWrapper.tsx, when taskType === ProcessTaskType.Archived and taskId !== TaskKeys.CustomReceipt, the component shows a loader with reason 'redirect-to-receipt' but does not perform explicit navigation. This is intentional - other parts of the system handle the actual navigation closer to where user interactions occur.

Learnt from: olemartinorg
PR: Altinn/app-frontend-react#3645
File: src/components/wrappers/ProcessWrapper.tsx:78-83
Timestamp: 2025-09-03T14:26:18.627Z
Learning: In ProcessWrapper.tsx, the useIsRunningProcessNext() hook intentionally uses a non-reactive pattern with queryClient.isMutating and local state instead of useIsMutating hook. This design choice is deliberate and should not be changed to a reactive pattern.

Learnt from: olemartinorg
PR: Altinn/app-frontend-react#3645
File: src/components/wrappers/ProcessWrapper.tsx:107-110
Timestamp: 2025-08-28T12:25:27.289Z
Learning: In the app-frontend-react codebase, the architecture favors navigation happening closer to user interactions or specific process state changes, rather than using universal effects that automatically redirect users. This is part of a design philosophy to avoid "free-standing effects that throw you around" and make navigation more predictable and contextual.